<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :formType="type" @formChange="formChangeHandle" :isSubmitBtn="false" :collapse="false" labelWidth="110" />
    <div style=" color: red; font-size: 12px; margin: 0 20px;">
      注：添加多张照片时,请以"压缩包"的形式添加;所有附件要求为盖公章的扫描件;
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <multiuse-button type="primary" v-show="type != 'show'" :click="dataHandle.bind(this, 60871002)">提 交</multiuse-button>
      <multiuse-button type="primary" v-show="type != 'show'" :click="dataHandle.bind(this, 60871001)">保 存</multiuse-button>
      <el-button @click="closeDrawer">返 回</el-button>
    </div>

    <BaseDialog :visible.sync="isShowVin" :title="'车辆查询'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <SearchVin :rowData="formData" @close="closeDialog" />
    </BaseDialog>
  </div>
</template>
<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { queryById, saveData } from '@/api/dealerSale/TestDrive/rebateExchangeApply';
import SearchVin from './SearchVin';

export default {
  mixins: [dictionary],
  props: ['type', 'rowData'],
  components: {
    SearchVin
  },

  data() {
    this.saveData = null;
    return {
      formList: this.createdFrom(),
      vinData: [],
      formData: {},
      isShowVin: false,
      vehicleId: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      if (this.type == 'add') return;
      const res = await queryById(this.rowData.id);
      if (res.resultCode == 200) {
        let fileUrl = [];
        this.formList.find(x => x.fieldName == 'cityId').itemList = this.createcityList(res.data.provinceId);
        this.formList.find(x => x.fieldName == 'districtId').itemList = this.district(res.data.cityId);
        this.formList.map(x => {
          if (res.data.enclosureDTO && res.data.enclosureDTO.length > 0) {
            res.data.enclosureDTO.map((x, i) => {
              let json = {
                uid: x.id,
                type: x.enclosureType,
                name: x.enclosureName,
                url: x.enclosureUrl
              };
              fileUrl[i] = json;
            });
            fileUrl.map(y => {
              if (x.fieldName == 'fp' && y.type == '发票') {
                x.initialValue = [y];
              } else if (x.fieldName == 'xsz' && y.type == '行驶证') {
                x.initialValue = [y];
              } else if (x.fieldName == 'bxd' && y.type == '保险单(强险和商业险)') {
                x.initialValue = [y];
              } else if (x.fieldName == 'spzp' && y.type == '车辆上牌照片') {
                x.initialValue = [y];
              } else if (x.fieldName == 'sfzyyzz' && y.type == '身份证/单位营业执照') {
                x.initialValue = [y];
              }
            });
          }
          if (x.fieldName != 'fp' && x.fieldName != 'xsz' && x.fieldName != 'bxd' && x.fieldName != 'spzp' && x.fieldName != 'sfzyyzz') {
            x.initialValue = res.data[x.fieldName];
          }
        });
      }
    },
    setFormData(data) {
      for (let key in data) {
        this.formList.map(x => {
          if (x.fieldName == key) {
            x.initialValue = data[x.fieldName];
          }
        });
      }
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    vinHandle() {
      this.isShowVin = true;
    },
    closeDialog(val, data) {
      this.isShowVin = val;
      if (data) {
        this.vehicleId = data[0].vehicleId;
        this.formList.find(x => x.fieldName == 'cityId').itemList = this.createcityList(data[0].provinceId);
        this.formList.find(x => x.fieldName == 'districtId').itemList = this.district(data[0].cityId);
        this.setFormData(data[0]);
      }
      console.log(data, '---关闭VIN---');
    },

    async dataHandle(status) {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData) {
        // 编辑传ID
        if (this.type == 'edit') {
          this.saveData.id = this.rowData.id ? this.rowData.id : '';
        }
        this.saveData.enclosures = [];
        this.saveData.vehicleId = this.vehicleId ? this.vehicleId : this.rowData.vehicleId;
        this.saveData.status = status;
        if (this.saveData.fp.length > 0) {
          this.saveData.enclosures[0] = {
            enclosureType: '发票',
            enclosureName: this.saveData.fp[0].name || '',
            enclosureUrl: this.saveData.fp[0].url || ''
          };
        }
        if (this.saveData.xsz.length > 0) {
          this.saveData.enclosures[1] = {
            enclosureType: '行驶证',
            enclosureName: this.saveData.xsz[0].name || '',
            enclosureUrl: this.saveData.xsz[0].url || ''
          };
        }
        if (this.saveData.bxd.length > 0) {
          this.saveData.enclosures[2] = {
            enclosureType: '保险单(强险和商业险)',
            enclosureName: this.saveData.bxd[0].name || '',
            enclosureUrl: this.saveData.bxd[0].url || ''
          };
        }
        if (this.saveData.spzp.length > 0) {
          this.saveData.enclosures[3] = {
            enclosureType: '车辆上牌照片',
            enclosureName: this.saveData.spzp[0].name || '',
            enclosureUrl: this.saveData.spzp[0].url || ''
          };
        }
        if (this.saveData.sfzyyzz.length > 0) {
          this.saveData.enclosures[4] = {
            enclosureType: '身份证/单位营业执照',
            enclosureName: this.saveData.sfzyyzz[0].name || '',
            enclosureUrl: this.saveData.sfzyyzz[0].url || ''
          };
        }

        let res = await saveData(this.saveData);

        if (res.resultCode == 200) {
          this.$notify.success({ title: '提示信息', message: '操作成功' });
          this.$emit('close', false, 'refresh');
        }
      }
    },
    closeDrawer() {
      this.$emit('close');
    },

    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '车辆信息'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '',
          readonly: true,
          rules: [{ required: true, message: '请选择VIN', trigger: 'change' }],
          unitRender: () => {
            return <el-button slot="append" icon="el-icon-search" onClick={() => this.vinHandle()}></el-button>;
          }
        },
        {
          type: 'INPUT',
          label: '车系',
          fieldName: 'seriesName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'modelName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '配置',
          fieldName: 'packageName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '选装',
          fieldName: 'optionName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '内饰',
          fieldName: 'trimName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '外饰',
          fieldName: 'colorName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'plateNumber',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '发票号',
          fieldName: 'invoiceNo',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '行驶证注册日期',
          fieldName: 'drivingRegisteDate',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'remark',
          selfCols: 2,
          placeholder: '',
          disabled: true
        },
        {
          type: 'BREAK_SPACE',
          label: '客户信息'
        },
        {
          type: 'INPUT',
          label: '客户姓名/公司名称',
          fieldName: 'customerName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人/单位客户',
          fieldName: 'companyLinkMan',
          selfCols: 2,
          placeholder: '',
          disabled: true
        },

        {
          type: 'SELECT',
          label: '证件类型',
          fieldName: 'cardType',
          placeholder: '',
          itemList: this.createDictList('1508'),
          disabled: true
        },
        {
          type: 'INPUT',
          label: '证件号码',
          fieldName: 'cardNo',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系电话',
          fieldName: 'companyLinkPhone',
          placeholder: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '所属地域(省份)',
          fieldName: 'provinceId',
          placeholder: '',
          itemList: this.createRegionsList(),
          disabled: true
        },
        {
          type: 'SELECT',
          label: '所属地域(城市)',
          fieldName: 'cityId',
          placeholder: '请选择',
          itemList: [],
          disabled: true
        },
        {
          type: 'SELECT',
          label: '县区',
          fieldName: 'districtId',
          placeholder: '',
          itemList: [],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '详细地址',
          fieldName: 'linkAddress',
          placeholder: '',
          selfCols: 2,
          disabled: true
        },
        {
          type: 'BREAK_SPACE',
          label: '附件信息'
        },
        {
          type: 'UPLOAD_FILE',
          label: '发票',
          fieldName: 'fp',
          labelWidth: '130px',
          offsetRightCols: 1,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '行驶证',
          fieldName: 'xsz',
          labelWidth: '130px',
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '保险单(强险和商业险)',
          fieldName: 'bxd',
          labelWidth: '130px',
          offsetRightCols: 1,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '车辆上牌照片',
          fieldName: 'spzp',
          labelWidth: '130px',
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },

        {
          type: 'UPLOAD_FILE',
          label: '身份证/单位营业执照',
          fieldName: 'sfzyyzz',
          labelWidth: '130px',
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      ];
    }
  }
};
</script>
